<template>
    <div>   
        <el-table
        height="700"
        :data="data"
        style="width: 100%">
        <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="详情页">
                        <div v-html="props.row.summary"></div>
                    </el-form-item>
                    
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
            fixed
            prop="id"
            label="id"
            width="50">
            </el-table-column>
         
            <el-table-column
            prop="first_title"
            label="主标题"
            width="180">
            </el-table-column>
            <el-table-column
            prop="second_title"
            label="副标题"
            width="180">
            </el-table-column>
         
          
            <el-table-column
            prop="url"
             width="100"
            label="缩略图">
                <template slot-scope="scope">
                    <img  :src="scope.row.url" alt="" style="width: 50px;height: 50px">
                </template>
            </el-table-column>

            

            <el-table-column
            fixed="right"
            label="操作"
            width="300"
            >
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                     <el-button
                    size="mini"
                    type="danger" 
                    plain
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                   
                 
                    <el-button
                    v-show='scope.row.to_index==1'
                    size="mini"
                    type='danger'
                    @click="handleIndexDown(scope.$index, scope.row)">取消推荐位1</el-button>
                    <el-button
                    v-show='scope.row.to_index==0'
                    size="mini"
                    type='success'
                    @click="handleIndexDown(scope.$index, scope.row)">推荐1</el-button>
                     
                    
                   
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        class='pagination'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[9]"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total">
        </el-pagination>

    </div>
</template>

<script>
import axios from 'axios'
import { mapState,mapMutations } from 'vuex'
export default {
    name:'Table',
    data() {
        return {
            total:1,
            page: 1,
            size:9,
            
            data:[],
            
            
            
        }
    },
    computed:{
        ...mapState(['baseUrl','currentPage','infoChange'])
    },
    mounted() {
        this.getListInfoByPage()
    },
    activated() {
        // console.log(this.infoChange)
        if(this.infoChange==true){
            this.getListInfoByPage();
            this.changeInfo(false);
        }
        
    },
    methods: {
        getListInfoByPage (){
            // console.log(this.baseUrl)
            // console.log(this.currentPage)
            axios.get(
                this.baseUrl+'cms/news/all',
                {
                    params:{
                        size:this.size,
                        page:this.currentPage
                    }
                })
            .then(this.getInfoSucc)
        },
        getInfoSucc (response){
            console.log(response)
            this.data = response.data.data
            this.total = response.data.count
            this.page = parseInt(response.data.current_page)
             for(var i =0;i<this.data.length;i++){
                if(this.data[i].img_url!=null){
                    this.url = this.data[i].img_url.url
                    // console.log(this.url)
                    this.data[i]['url'] = this.url
                }
                
            }
            // console.log(this.currentPage)
            
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.size = val
            this.getListInfoByPage()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.page = val
            this.changeCurrentPage(val)
            this.getListInfoByPage()
            // console.log(localStorage)
            
        },
        ...mapMutations(['changeCurrentPage','changeInfo']),
         handleEdit(index, row) {
            console.log(index);
            console.log(row)
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        handleDown(index, row){
            
            let id = row.id;
            let show = row.onShow;
            console.log(show)
            if(show!=1){
                show = 1
            }else{
                show = 0;
            }
            
            this.outShow(id,show)
        },
        handleIndexDown(index, row){
            let id = row.id;
            let to_index = row.to_index;
            console.log(to_index)
            if(to_index!=1){
                to_index = 1
            }else{
                to_index = 0;
            }
            this.outToIndex(id,to_index)
        },
        
        outToIndex(id,to_index){
            axios.get(
                this.baseUrl+'cms/news/changeIndex',
                {
                    params:{
                        id:id,
                       to_index:to_index 
                    }
                })
            .then(this.changeSucc)
        },
        changeSucc(response){
            if(response.data == true){
                this.$message({
                message: '恭喜你，这是一条成功消息',
                type: 'success',
                duration:'3000',
                showClose:true,
                });
                this.getListInfoByPage();
            }

        }
     
    },
    
}
</script>

<style lang="stylus" scoped>
.pagination
    margin 0 auto
                .name-wrapper
                    display inline-block    
</style>
  